<template>
  <div>
    <!-- <button @click="del">删除</button> -->
    <ul class="todo-list">
      <TodoListItem
        v-for="item in todoList"
        :key="item.id"
        :item="item"
        @itemDel="del"
      />
    </ul>
  </div>
</template>

<script>
import TodoListItem from "./TodoListItem.vue";

export default {
  name: "TodoList",
  data() {
    return {
      todoList: [],
    };
  },
  components: {
    TodoListItem,
  },
  mounted() {
    this.$bus.$on("todoAddEvent", (text) => {
      this.todoList.push({
        id: Date.now(),
        text,
        state: false,
      });
    });
  },
  methods: {
    del(id) {
      // this.$emit("listDel", id);
      this.todoList = this.todoList.filter((item) => item.id != id);
    },
  },
};
</script>

<style lang="scss" scoped>
.todo-list {
  padding: 10px;
}
</style>